<template>
    <div class="account-info-wrapper">
        <Card>
            <p slot="title" class="sub-title">
                <span class="account-type">设备概览</span>
            </p>

            <div class="flex flex-align-center margin-bottom-20">
                <span class="margin-right-10">设备型号</span>
                <Select style="width:200px" placeholder="设备型号"  v-model="productTypeId" @on-change="initData">
                    <Option :value="''">全部</Option>
                    <Option
                        v-for="model in models"
                        :key="model.id"
                        :value="model.id">{{model.name}}</Option>
                </Select>
            </div>

            <Table :data="tableData" :columns="columns" :loading="loading"></Table>

        </Card>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
export default {
  name: 'client-device-info',
  created () {
    this.initData()
  },
  data () {
    return {
      loading: false,
      productTypeId: null,
      tableData: [],
      models: [],
      columns: [
        {
          title: '产品型号',
          key: 'device_product_name'
        },
        {
          title: '采购数',
          key: 'total_quantity'
        },
        {
          title: '已安装数',
          key: 'consume_quantity'
        },
        {
          title: '安装中数',
          key: 'unfina_quantity'
        },
        {
          title: '库存数',
          key: 'real_quantity'
        }
      ]
    }
  },
  methods: {
    async initData () {
      try {
        this.loading = true
        this.tableData = await http.req(api.client_device_statistics, null, {
          device_product_id: this.productTypeId || null
        })
        if (this.models.length === 0) {
          this.models = await http.req(api.ticket_device_model, null, null)
        }
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>